<template>
  <div class="index_date">
    <div class="date_left">
        <h4>帮助链接</h4>
        <ul>
          <li>
            <img src="../../assets/common/help.png" alt="">
             <span>入门指南</span>  
          </li>
             <li>
            <img src="../../assets/common/help.png" alt="">
             <span> 在线帮助手册</span>  
          </li>
             <li>
            <img src="../../assets/common/help.png" alt="">
             <span> 联系技术支持</span>  
          </li>
           <li>
            <img src="../../assets/common/help.png" alt="">
             <span>添加连接</span>  
          </li>
        </ul>
    </div>
    <div class="date_right">
        <el-calendar v-model="date" >
         <template
          slot="dateCell"
          slot-scope="{date, data}">
          <!-- 使用日期插件的作用域插槽 的数据自定义渲染 date当前日期
           data 当前一些数据  -->
              <p>{{new Date(date).getDate()}}</p>
        </template>
        </el-calendar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Vue2304BIndexDate',

  data() {
    return {
        date:new Date()
    };
  },

  mounted() {
    
  },

  methods: {
      getData(date,data){//date当前日期
          console.log(date,data,"-------------")
      }
  },
};
</script>
<style lang="scss" scoped>
// figma
    .index_date{
      width:808px;
      height:370px;
      display:flex;
     padding:0 20px;
     box-sizing:border-box;
      .date_left{
          width:273px;
      ul{
        width:273px;
        list-style:none;
        li{
          display:flex;
          align-items:center;
          height:50px;
          line-height:50px;
          background:#ccc;
          margin-top:5px;
        }
      }
      }
      .date_right{
        // flex:1;
        width:410px;
        height:330px;
        // 修改elementui的样式 样式击穿
       
      } 
    }
    .el-calendar{
         height:330px !important;
    }
    // 如果/deep/ 报错 可替换::v-deep
      .el-calendar ::v-deep .el-calendar__header{
          display:none !important;
    }
     .el-calendar ::v-deep .el-calendar-table  td{
      border:none;
    }
</style>